<template>
	<view>
		<u-popup :show="gift_show" @close="close" :closeable="true" round="15">
			<block v-if="list && list[0].length > 0">
				<u-scroll-list :indicatorActiveColor="color_value" :indicator="list[0].length > 6 ? true : false">
					<view class="scroll-list">
						<view class="scroll-list__line" v-for="(item, index) in list" :key="index">
							<view class="scroll-list__line__item" v-for="(item1, index1) in item" :key="index1"
								:class="[index1 === item.length - 1 && 'scroll-list__line__item--no-margin-right']"
								@click="sub(item1)">
								<image class="scroll-list__line__item__image" :src="imgUrl + item1.image"
									v-if="item1.image"></image>
								<text class="scroll-list__line__item__text">{{ item1.name }}</text>
								<text class="scroll-list__line__item__text" style="color: red;" v-if="parseFloat(item1.money) > 0">￥{{ item1.money }}/{{ item1.num }}票</text>
								<text class="scroll-list__line__item__text" style="color: red;" v-if="num > 0">{{ item1.num }}票</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</block>
			<view style="padding: 80px 40px;" v-else>
				<u-text text="暂未设置礼物~" align="center" :color="color_value"></u-text>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				color_value: 'common/color_value',
				ad: 'common/ad',
			})
		},
		name: 'gift',
		props: {
			gift_show: {
				type: Boolean,
				default: false
			},
			vote_id: {
				type: Number,
				default: 0
			},
			person_id: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				list: null,
			};
		},
		watch: {
			gift_show(value) {
				if (value) {
					this.gift_show = value;
				}
			}
		},
		created() {
			this.http('gift/index', '', 'get').then(res => {
				this.list = res.data;
			});
		},
		methods: {
			close() {
				this.$emit('close');
			},
			sub(gift){
				if (gift.money == 0 || gift.money == '0.00'){
					if (!this.ad){
						uni.$u.toast('加载广告异常')
						return
					}
					// 激励广告
					this.adUtils.jl.load(this.ad.vote_jl, () => {
						//这里写你的任意奖励事件
						this.http('gift/submit', {
							vote_id: this.vote_id,
							person_id: this.person_id,
							gift_id: gift.id
						}, 'post').then(res => {
							uni.$u.toast(res.msg)
							this.close()
						});
					});
				}else{
					this.pay(gift.id)
				}
			},
			pay(gift_id) {
				this.http('gift/pay', {
					vote_id: this.vote_id,
					person_id: this.person_id,
					gift_id: gift_id
				}, 'get').then(res => {
					// #ifdef H5
					this.$jweixin.config({
						debug: false,
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.paySign,
						jsApiList: ['chooseWXPay']
					});
					this.$jweixin.ready(result => {
						this.$jweixin.chooseWXPay({
							appId: res.data.appId,
							timestamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: res => {
								if (res.errMsg === 'chooseWXPay:ok') {
									uni.$u.toast('赠送成功')
									this.close()
								}
							},
							cancel: res => {
								console.log(res)
							},
						});
					});
					// #endif
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: res => {
							uni.$u.toast('赠送成功')
							this.close()
						},
						fail: function(a) {
							console.log(a);
						}
					});
					// #endif
				});
			}
		}
	};
</script>

<style lang="scss">
	.scroll-list {
		@include flex(column);
		margin-top: 15px;
		padding: 15px;

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;
				background-color: #f2f2f2;
				padding: 10px 15px;
				border-radius: 5px;
				text-align: center;

				&__image {
					width: 60px;
					height: 60px;
					margin: 0 auto;
				}

				&__text {
					display: block;
					margin-top: 5px;
					color: #000;
					font-size: 12px;
					text-align: center;
					white-space: nowrap;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}
</style>
